﻿<!--
    
 @Name：不落阁整站模板源码
 @Author：Absolutely
 @Site：http://www.lyblogs.cn

 -->

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8">
		<meta http-equiv="Content-Language" content="zh-CN">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title>不落阁 - 文章专栏</title>
		<link rel="shortcut icon" href="../images/Logo_40.png" type="image/x-icon">
		<!--Layui-->
		<link href="../plug/layui/css/layui.css" rel="stylesheet" />
		<!--font-awesome-->
		<link href="../plug/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<!--全局样式表-->
		<link href="../css/global.css" rel="stylesheet" />
		<!--本页样式表-->
		<link href="../css/article.css" rel="stylesheet" />
	</head>

	<body>
		<div id="app" v-cloak>
			<!-- 导航 -->
			<nav class="blog-nav layui-header">
				<div class="blog-container">

					
					<!-- 不落阁 -->
					<a class="blog-logo" href="home.html">{{systemInfo.netName }}</a>
					<!-- 导航菜单 -->
					<ul class="layui-nav" lay-filter="nav">
						<li class="layui-nav-item">
							<a href="home.html"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
						</li>
						<li class="layui-nav-item layui-this">
							<a href="article.html"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
						</li>
						<li class="layui-nav-item ">
							<a href="resource.html"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
						</li>
					</ul>
					<!-- 手机和平板的导航开关 -->
					<a class="blog-navicon" href="javascript:;">
						<i class="fa fa-navicon"></i>
					</a>
				</div>
			</nav>
			<!-- 主体（一般只改变这里的内容） -->
			<div class="blog-body">
				<div class="blog-container">
					<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
						<a href="home.html" title="网站首页">网站首页</a>
						<a><cite>文章专栏</cite></a>
					</blockquote>
					<div class="blog-main">
						<div class="blog-main-left" id="div_left_articles">
							<div class="article shadow" v-for="item in leftArticles">
								<div class="article-left">
									<img :src="item.img" :alt="item.title" />
								</div>
								<div class="article-right" @click="articleDetail(item.id)">
									<div class="article-title">
										<a>{{item.title}}</a>
									</div>
									<div class="article-abstract">
										{{item.brief}}
									</div>
								</div>
								<div class="clear"></div>
								<div class="article-footer">
									<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{item.addDate | datetime}}</span>
									<span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;{{item.authorName}}</span>
									<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a v-for="tag in item.tags.split(',')" @click="searchByTag(tag)">{{tag}} </a></span>
									<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;{{item.views}}</span>
									<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;{{item.comments}}</span>
								</div>
							</div>
							<div id="div_article_buttom"></div>
						</div>
						<div class="blog-main-right">
							<div class="blog-search">
								<div class="layui-form-item">
									<div class="search-keywords  shadow">
										<input type="text" name="keywords" v-model="keyword" maxlength="10" lplaceholder="输入关键词搜索" autocomplete="off" class="layui-input">
									</div>
									<div class="search-submit  shadow">
										<a class="search-btn" @click="search"><i class="fa fa-search"></i></a>
									</div>
								</div>

							</div>
							<div class="article-category shadow">
								<div class="article-category-title">分类导航</div>
								<a v-for="item in tags" @click="searchByTag(item.name)">{{item.name}}</a>
								<div class="clear"></div>
							</div>
							<div class="blog-module shadow">
								<div class="blog-module-title">热门文章</div>
								<ul class="fa-ul blog-module-ul">
									<li v-for="item in hotArticles"><i class="fa-li fa fa-hand-o-right"></i>
										<a @click="articleDetail(item.id)">{{item.title}}</a>
									</li>

								</ul>
							</div>

							<!--右边悬浮 平板或手机设备显示-->
							<div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>

			<!--侧边导航-->
			<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
				<li class="layui-nav-item">
					<a href="home.html"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
				</li>
				<li class="layui-nav-item layui-this">
					<a href="article.html"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
				</li>
				<li class="layui-nav-item">
					<a href="resource.html"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
				</li>
				
			</ul>
			<!--分享窗体-->
			<div class="blog-share layui-hide">
				<div class="blog-share-body">
					<div style="width: 200px;height:100%;">
						<div class="bdsharebuttonbox">
							<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
							<a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
							<a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
							<a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
						</div>
					</div>
				</div>
			</div>
			<!--遮罩-->
			<div class="blog-mask animated layui-hide"></div>
		</div>
		<script src="../plug/jquery/jquery.min.js"></script>
		<script src="../plug/layui/lay/dest/layui.all.js"></script>
		<!--vue -->
		<script src="../plug/vue/vue.js"></script>
		<script src="../plug/vue/vue-common-filter.js"></script>
		<script type="text/javascript" src="../js/setting.js"></script>
		<script type="text/javascript" src="../js/request.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/api/article_page.js"></script>
		<script type="text/javascript" src="../js/api/siteinfo_get.js"></script>
		<script type="text/javascript" src="../js/api/article_tag_page.js"></script>
		<!-- 全局脚本 -->
		<script src="../js/global.js"></script>
		<script type="text/javascript" src="../js/article.js"></script>
	</body>

</html>